<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>index</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</head>
	<body style="font-size: 13px;">
		<div>
			<div style="margin: 30px 0 30px 0;">
				<div style="margin: 0 0 0 150px;"><b id="a">A</b></div>
				<div style="margin: 50px 0 0 500px;"><b id="b">B</b></div>
				<div style="margin: 70px 0 0 50px;"><b id="c">C</b></div>
				<div style="margin: 80px 0 0 300px;"><b id="d">D</b></div>
			</div>
			<div>
				选择：<select name="sel" id="sel">
					<option value="A" selected>A</option>
					<option value="B">B</option>
					<option value="C">C</option>
					<option value="D">D</option>
				</select>
			</div>
			<div>
				<button name="btn" value="A">A</button>
				<button name="btn" value="B">B</button>
				<button name="btn" value="C">C</button>
				<button name="btn" value="D">D</button>
			</div>
		</div>
		<div id="ok" style="width: 16px; font-color: white; background-color: red;">OK</div>
		
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript">
			var pa = {left: $("#a").position().left + $("#a").width(), top: $("#a").position().top};
			var pb = {left: $("#b").position().left + $("#b").width(), top: $("#b").position().top};
			var pc = {left: $("#c").position().left + $("#c").width(), top: $("#c").position().top};
			var pd = {left: $("#d").position().left + $("#d").width(), top: $("#d").position().top};
			$("#ok").css({position: 'absolute', left: pa.left, top: pa.top});
			var map = {'A' : pa, 'B': pb, 'C': pc, 'D': pd};
			$("#sel").change(function() {
				var sv = this.value;
				$("#ok").animate({
					left: map[sv].left,
					top: map[sv].top,
				}, 2000);
			});
			$("button[name=btn]").click(function() {
				var bv = $(this).attr("value");
				$("#ok").animate({
					left: map[bv].left,
					top: map[bv].top,
				}, 1000);
			});
		</script>
	</body>
</html>
